<template>
  <view class="my-address">
    <!-- 导航栏 -->
    <Header title="地址列表"></Header>
    <!-- 背景-->
    <view class="bg"></view>

    <!-- 卡片-->
    <view class="card" v-if="userAddress['addressData'].length">
      <view class="address-item" v-for="e in userAddress['addressData']" :key="e['aid']">
        <view class="info">
          <view class="user">
            <text>{{e['name']}}</text>
            <text>{{e['tel']}}</text>
            <text class="default" v-show="e['isDefault']">默认</text>
          </view>
          <view class="addres">
            {{e['province']}}{{e['city']}}{{e['county']}}
          </view>
        </view>
        <view class="edit" @click="editAddressHandler(e['aid'])">
          <uni-icons type="compose" size="20"></uni-icons>
        </view>
      </view>
    </view>
    <MyEmpty v-else title="暂无收货地址"></MyEmpty>
    <view class="add-address">
      <view class="btn" @click="gotoAddAddressHandler">
        新增地址
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapActions
  } from "vuex"
  import MyEmpty from '../../../../components/MyEmpty/MyEmpty.vue'
  import Header from "../../../../components/HeaderNav/HeaderNav.vue"
  export default {
    components: {
      Header,
      MyEmpty
    },
    data() {
      return {};
    },
    onLoad() {
      // this.queryAllAddress()
    },
    onShow() {
      const {
        addressIdx,
        addressData
      } = JSON.parse(uni.getStorageSync('USERADDRESS') || '{}')
      const len = addressData.length
      addressIdx > len ? this.getAddress(len) : this.getAddress(0)

    },
    computed: {
      ...mapState('user', ['userAddress'])
    },
    methods: {
      ...mapActions("user", ['getAddress']),
      gotoAddAddressHandler() {
        uni.navigateTo({
          url: '/pages/my/my/my_address/add_address/add_address'
        })
      },
      editAddressHandler(aid) {
        uni.navigateTo({
          url: '/pages/my/my/my_address/add_address/add_address?title=编辑地址&aid=' + aid,
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f7f7f7;
    padding-bottom: 100rpx;
  }

  .my-address {

    .bg {
      background-color: #0c34ba;
      height: 200rpx;
    }

    .card {
      display: flex;
      flex-wrap: wrap;
      border-top-right-radius: 15rpx;
      border-top-left-radius: 15rpx;
      overflow: hidden;
      background-color: #fff;
      transform: translateY(-50rpx);
      margin: 0 30rpx;
      padding: 30rpx;

      .address-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-size: 26rpx;
        border-bottom: #ddd solid 2rpx;
        margin-top: 20rpx;

        &:last-child {
          border-bottom: #ddd solid 0;
        }

        .info {
          .user {
            text {
              margin-right: 15rpx;

              &.default {
                background-color: #0c34ba;
                color: #fff;
                font-size: 20rpx;
                border-radius: 50rpx;
                display: inline-block;
                padding: 0 10rpx;
              }
            }
          }

          .addres {
            margin: 10rpx 0;
            margin-bottom: 20rpx;
          }
        }

        .edit {
          margin-right: 50rpx;
        }
      }

    }


    .add-address {
      padding: 30rpx;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;

      .btn {
        background-color: #0c34ba;
        color: #fff;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        height: 80rpx;
      }
    }
  }
</style>
